<template>
<div class="Regiter">
  <h2>注册页面</h2>
<div class="Register-form">
  <el-form :model="form" label-width="120px" >
    <el-form-item label="用户名:">
      <el-input v-model="form.userName" style="width: 200px;" />
    </el-form-item>
    <el-form-item label="昵称:">
      <el-input v-model="form.nickName"  style="width: 200px;"  />
    </el-form-item>
    <el-form-item label="密码：">
      <el-input v-model="form.password"   style="width: 200px;" />
    </el-form-item>
    <el-form-item label="邮件：">
      <el-input v-model="form.email"   style="width: 200px;" />
    </el-form-item>
    <el-form-item label="电话号码：">
      <el-input v-model="form.phoneNumber"  style="width: 200px;"  />
    </el-form-item>
    <el-form-item label="性别：">
      <el-radio-group v-model="form.sex" class="ml-4">
      <el-radio label="男" size="large">男</el-radio>
      <el-radio label="女" size="large">女</el-radio>
    </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default" @click="submit">点击注册</el-button>
    </el-form-item>
  </el-form>
</div>
     <el-select  v-model="searchByName" 
              filterable 
              placeholder="请输入企业名称/姓名" 
              remote
              clearable
              @change="currentSel"
              reserve-keyword
              :remote-method="Tolikesearch">
              <el-option
                v-for="item in likesearch"
                :key="item.userId"
                :label="item.realName"
                :value="item.userId">
             </el-option>
    </el-select>
    <div>
    <el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="reqLoading"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
    <Vcode  :show="form.isShow"  @success="onSuccess" @close="onClose"/>
</div>
</template>

<script>
 import Vcode from "vue3-puzzle-vcode";
 import axios from '@/utils/request';
export default {
name:'MyRegister',
data(){
  return{
   form:{
   isShow:false,
    userName:'',
    nickName:'',
    password:'',
    email:'',
    phoneNumber:'',
    sex:'男',
    
   },
   value: '',
      reqLoading: false,
           options: []
  }
},
components:{
  Vcode
},
methods:{
  remoteMethod (query) {
          if (query !== '') {
            this.reqLoading = true
            setTimeout(() => {
              // this.reqLoading = false
              axios.post('/search/select',JSON.stringify(this.value)).then(res=>{
                // this.options=res.data
                console.log(res.data);
              })
              // this.options = [{label: '答案cp3',value: '答案cp3'}]
            }, 200)
          } else {
            this.options = []
          }
        },
  submit(){
    this.form.isShow = true;
    // console.log(this.userName);
  },
  onShow(){
    
  },
  onClose(){
    this.form.isShow = false;
  },
  onSuccess(){
    this.onClose();//验证成功手动关闭
    const params={
        userName:this.form.userName,
        nickName:this.form.nickName,
        password:this.form.password,
        email:this.form.email,
        phoneNumber:this.form.phoneNumber,
            sex:this.form.sex
      }
      // axios.post('/find',JSON.stringify(params)).then(res=>{
      axios.post('/logandregis_/register',JSON.stringify(params)).then(res=>{
                    console.log(res);
                    if (res.code===200)
                    {	console.log('请求成功:')}})
  }
  }
}
</script>

<style>
.Regiter{
  text-align: center;
}
.Register-form{
  margin-left: 500px;
}
</style>

    